<template>
    <div id="layout-login">
        <div class="login-wrap">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 nepadmin-tc">
                        <div class="layui-logo">{{d.title}}</div>
                    </div>
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
                        <div class="layui-form">
                            <ul class="login-type-tab" style="padding-bottom: 10px;">
                                <li lay-filter="changeType" data-type="password" class="active">密码登录</li>
                                <!--                                <li lay-filter="changeType" data-type="phone">手机码登录</li>-->
                                <!--                                <li lay-filter="changeType" data-type="qrcode" style="float: right"-->
                                <!--                                    class="layui-hide-xs"-->
                                <!--                                    lay-tips="扫码登录">-->
                                <!--                                    <span class="fa fa-qrcode" style="font-size: 24px;"></span></li>-->
                            </ul>
                            <div data-type-block="qrcode"
                                style="display: flex;flex-direction: column;align-items: center;">
                                <div class="fa fa-qrcode" style="font-size: 200px">
                                    <!--                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>-->
                                </div>
                                <div style="padding-bottom: 20px;">
                                    1秒即登录，方便又安全<br>
                                    使用 手机版 扫码登录
                                </div>
                            </div>
                            <div data-type-block="password">
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-username"></label>
                                    <input type="text" name="username" placeholder="账户名" class="layui-input"
                                        value="manager">
                                </div>
                                <div class="layui-form-item" data-type="password">
                                    <label class="layui-icon label-icon layui-icon-password"></label>
                                    <input type="password" name="password" placeholder="密码" value="123456"
                                        class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs7">
                                            <label class="layui-icon label-icon layui-icon-vercode"></label>
                                            <input type="text" maxlength="5" name="img_code" placeholder="图形验证码"
                                                class="layui-input">
                                        </div>
                                        <div class="layui-col-xs5">
                                            <img class="codeimg" onclick="this.src=src + '&random=' + Math.random()"
                                                src="/mock/img/img_code.jpg" />
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                        lay-filter="login">
                                        <i style="display: none"
                                            class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                        立即登录
                                    </button>
                                </div>

                            </div>
                            <div data-type-block="phone">
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-cellphone"></label>
                                    <input type="text" maxlength="11" name="mobile" placeholder="手机号"
                                        class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-vercode"></label>
                                    <input type="text" name="code" maxlength="4" placeholder="手机验证码"
                                        class="layui-input">
                                    <button class="layui-btn layui-btn-danger layui-btn-sm sendsms layui-btn-disabled">
                                        获取验证码
                                    </button>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                        lay-filter="login">
                                        <i style="display: none"
                                            class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                        立即登录
                                    </button>
                                </div>
                            </div>
                            <div id="biz-copyright">
                                {{d.copyright}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    layui.use(['form', 'md5', 'layer', 'view', 'api', 'conf', 'app'], function () {
        const { md5, jquery: $, view, api, app } = layui;
        app({
            data: {
                copyright: "",
            },
            binder: [
                { type: "custom", event: "click", selector: "li[lay-filter]", attr: "lay-filter" }
            ],
            beforeRender: async function () {
                const that = this;
                await api("/system/config/site").then(function ({ data }) {
                    that.copyright = data.copyright;
                    that.title = data.title;
                    document.title = that.title;

                });
            },
            afterRender: function () {
                this.changeType($("[data-type='password']"));
            },
            methods: {
                changeType: function (elem) {
                    $("[data-type-block]").hide();
                    $("[data-type]").removeClass("active");
                    $("[data-type-block='" + $(elem).data('type') + "']").show();
                    $(elem).addClass("active");
                },
                login: function (data) {
                    data = data.field;

                    if (!data.username) {
                        layer.msg('请输入账户名');
                        return;
                    }
                    if (!data.password) {
                        layer.msg('请输入密码');
                        return;
                    }
                    // if(data.img_code != "0413"){
                    //    layer.msg("验证码错误");
                    //    return;
                    // }

                    api("/system/user/login", {
                        username: data.username,
                        password: md5.exec(data.password),
                        imgCode: data.img_code,
                    }).then(function (res) {
                        layer.msg('登录成功，请在跳转中...', {});

                        //保存凭证
                        localStorage.setItem('user_token', res.data.token);

                        setTimeout(function () {
                            view.route("/");
                        }, 1000);
                    }).catch(function (res) {
                        layer.msg(res.msg);
                        $("[name='img_code']").val('');
                        $(".codeimg").click();
                    });
                },
            }
        });
    });
</script>

<style>
    #layout-login {
        height: 100%;
        background: var(--biz-theme-bg-color, #252834);
        padding-top: 1px;
        margin-top: -1px;
    }

    #layout-login .layui-logo {
        font-size: 30px;
        width: 100%;
        padding: 0;
        line-height: 120px;
        height: 120px;
        color: white;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        transition: height .8s cubic-bezier(0.075, 0.82, 0.165, 1);
        display: flex;
        justify-content: center;
    }

    #layout-login .layui-logo span {
        font-weight: normal;
        color: #fff;
        border-bottom: 1px solid #3491ff;
    }

    #layout-login .layui-logo span b {
        color: #3491ff;
    }

    #layout-login .login-wrap {
        position: relative;
        top: 50%;
        height: 100vh;
    }

    #layout-login .layui-form {
        overflow: hidden;
        background: #fff;
        padding: 40px;
        padding-bottom: 20px;
        border-radius: 0px;
        box-shadow: 0 0 30px #000;
        position: relative;
    }

    #layout-login .layui-form-item {
        position: relative;
    }

    #layout-login .verify-block {
        display: none;
    }

    #layout-login .layui-input {
        text-indent: 26px;
    }

    #layout-login .codeimg {
        margin-left: 10px;
        cursor: pointer;
        max-width: 120px;
        max-height: 40px;
    }

    #layout-login .sendsms {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 100px;
        border: none;
    }

    #layout-login .sendsms.layui-btn-disabled {
        background: #f4f4f4;
        color: #bbb;
    }

    #layout-login .houseimg {
        text-align: center;
    }

    #layout-login .houseimg img {
        display: inline-block;
        margin-top: 5%;
    }

    #layout-login .login-type-tab {
        margin-bottom: 20px;
        overflow: hidden;
    }

    #layout-login .login-type-tab li {
        display: inline-block;
        padding-right: 20px;
        font-size: 16px;
        line-height: 30px;
        color: #bbb;
        cursor: pointer;
        transition: color .5s ease;
    }

    #layout-login .login-type-tab li.active {
        color: #333;
    }

    #layout-login .login-type-tab li .qrcode-icon {
        font-size: 24px;
    }

    #layout-login .phonecode-block {
        display: none;
    }

    #layout-login .qrcode-block {
        text-align: center;
        display: none;
    }

    #layout-login .qrcode-block .qrcode {
        border: 1px solid #eee;
        display: inline-block;
        padding: 15px;
        margin: 30px 0;
        width: 158px;
        height: 158px;
    }

    #layout-login .qrcode-block .qrcode .layui-icon {
        line-height: 158px;
        font-size: 44px;
        color: #e6e6e6;
    }

    #layout-login .qrcode-block .p1 {
        font-size: 16px;
    }

    #layout-login .qrcode-block .p2 {
        font-size: 14px;
        color: #999;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #layout-login .layui-form-item .label-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 38px;
        line-height: 38px;
        text-align: center;
        color: #d2d2d2 !important;
    }


    /* biz专属类*/
    #biz-copyright {
        font-size: smaller;
        text-align: center;
        color: #999;
        padding-top: 10px;
    }
</style>